<template>
  <div class="page">
    <van-nav-bar title="标题" :left-text="cityStore.city?.name" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/cinemas/search')"/>
      </template>
    </van-nav-bar>

    <van-dropdown-menu ref="dmRef">
      <van-dropdown-item :title="districtName">
        <div class="box">
          <van-button
            v-for="(item, index) in districtList"
            :key="index"
            :class="{ active: item === districtName }"
            @click="onDistrictClick(item)"
          >
            {{ item }}
          </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="ticket" :options="ticketOptions"></van-dropdown-item>
    </van-dropdown-menu>

    <div class="list">
      <van-cell-group>
        <van-cell
          v-for="item in displayCinemas"
          :key="item.cinemaId"
          :title="item.name"
          :value="item.districtName"
          to="/center"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watchEffect } from 'vue'
import { type Cinema } from '@/api/interface'
import { type DropdownMenuInstance, showLoadingToast, closeToast } from 'vant'
import { useCinemaStore } from '@/stores/cinema'
import { useCityStore } from '@/stores/city'


const cityStore = useCityStore()
//调用CinemaStore
const cinemaStore = useCinemaStore()

const dmRef = ref<DropdownMenuInstance | null>(null)
const ticketOptions = [
  { text: 'APP订票', value: 1 },
  { text: '前台兑换', value: 2 }
]
//影院列表数据
const cinemas = ref<Cinema.Item[]>([])
//当前选择的区名字
const districtName = ref('全城')
//当前选择的方式
const ticket = ref(1)

//区数据
const districtList = computed(() => {
  const arr = cinemas.value.map((item) => item.districtName)
  const tmp = Array.from(new Set(arr))
  return ['全城', ...tmp]
})

//用于页面展示的影院列表数据
//依赖项Cinemas、districtName
const displayCinemas = computed(() => {
  //如果当前选择的是全城，则将cinemas原样返回
  if (districtName.value === '全城') {
    return cinemas.value
  } else {
    //过滤
    return cinemas.value.filter((item) => item.districtName === districtName.value)
  }
})

//区点击
function onDistrictClick(item: string) {
  //赋值
  districtName.value = item
  //控制dropdownMenu close
  dmRef.value?.close()
}

watchEffect(() => {
  showLoadingToast({
    duration: 0, //展示时长，默认为2s
    message: 'Loading...',
    forbidClick: true
  })


//调用仓库的动作
  cinemaStore
    .getItems({ cityId: 440300, ticketFlag: ticket.value })
    .then((result) => {
      // 将接口数据赋值给 cinemas
      cinemas.value = result
      // 将 当前选择的 区修改成全城
      districtName.value = '全城'
    })
    .finally(() => {
      // 关闭 loading
      closeToast()
    })
})

  // getCinemaList({
  //   cityId: 440300,
  //   ticketFlag: ticket.value
  // })
//     .then((result) => {
//       //将接口数据赋值给 cinemas
// cinemas.value = result.cinemas
//       //将当前选择的区修改成全城
//       districtName.value = '全城'
//     })
//     .finally(() => {
//       closeToast()
//     })

</script>

<style lang="scss" scoped>
.box {
  padding: 10px 0 0 10px;
  .van-button {
    padding: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 80px;
    height: 30px;
    font-size: 12px;
  }
  .van-button.active {
    color: orange;
    border-color: orange;
  }
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.list {
  flex: 1;
  overflow-y: auto;
}
</style>
